<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#text{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: white;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.querySelector("#text");
				canvas.width=document.documentElement.clientWidth;
				canvas.height=document.documentElement.clientHeight;
				if(canvas.getContext){
					var ctx=canvas.getContext("2d");
					var flag=0;
					var value=0;
					setInterval(function(){
						ctx.clearRect(0,0,canvas.width,canvas.height)
						value+=10;
						flag++;

						if(flag==9){
							flag=1;
						}
						var img =new Image();
						img.src="img/q_r"+(flag)+".jpg";
						img.onload=function(){
							draw(this);
						}
					},100)
					function draw(img){
						ctx.drawImage(img,value,0);
					}
				}
			}
		</script>
	</head>
	<body>
		<canvas id="text" width="400" height="400"></canvas>
	</body>
</html>
